"use client"

import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { LinearGradient } from "expo-linear-gradient"
import { ChevronRight, Star } from "lucide-react-native"
import { theme } from "@/constants/theme"
import { useRouter } from "expo-router"

interface VipCardProps {
    isActivated: boolean
    expiryDate?: string
}

export default function VipCard({ isActivated = false, expiryDate = "" }: VipCardProps) {
    const router = useRouter()

    const handleActivate = () => {
        if (isActivated) return
        router.push("/my/vip-subscription")
    }

    // 已激活VIP的渐变色
    const activatedGradient = ["#3A7BD5", "#00D2FF"]
    // 未激活VIP的渐变色
    const notActivatedGradient = ["#6A4AD4", "#8A6CEA"]

    return (
        <TouchableOpacity style={styles.vipCard} activeOpacity={0.8} onPress={handleActivate}>
            <LinearGradient
                colors={isActivated ? activatedGradient : notActivatedGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                style={styles.vipCardGradient}
            >
                <View style={styles.vipContent}>
                    <View style={styles.vipInfo}>
                        <View style={styles.vipIconContainer}>
                            <Star size={16} color="#FFF" fill="#FFF" />
                        </View>
                        <Text style={styles.vipText}>VIP会员</Text>
                        <View
                            style={[
                                styles.vipStatus,
                                { backgroundColor: isActivated ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.2)" },
                            ]}
                        >
                            <Text style={styles.vipStatusText}>{isActivated ? "已激活" : "未开通"}</Text>
                        </View>
                    </View>

                    {isActivated ? (
                        <View style={styles.vipBenefits}>
                            <Text style={styles.vipBenefitText}>• 已解锁全部学习内容</Text>
                            <Text style={styles.vipBenefitText}>• 专属学习计划已开启</Text>
                            <Text style={styles.vipBenefitText}>• 到期时间: {expiryDate}</Text>
                        </View>
                    ) : (
                        <View style={styles.vipBenefits}>
                            <Text style={styles.vipBenefitText}>• 解锁全部学习内容</Text>
                            <Text style={styles.vipBenefitText}>• 专属学习计划</Text>
                            <Text style={styles.vipBenefitText}>• 无广告体验</Text>
                        </View>
                    )}
                </View>

                {!isActivated && (
                    <TouchableOpacity style={styles.activateButton} onPress={handleActivate}>
                        <Text style={styles.activateButtonText}>立即开通</Text>
                        <ChevronRight size={16} color="#6A4AD4" />
                    </TouchableOpacity>
                )}
            </LinearGradient>
        </TouchableOpacity>
    )
}

const styles:any = StyleSheet.create({
    vipCard: {
        marginHorizontal: theme.spacing.xl,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(106, 74, 212, 0.5)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 6,
            },
        }),
    },
    vipCardGradient: {
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
    },
    vipContent: {
        marginBottom: theme.spacing.lg,
    },
    vipInfo: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    vipIconContainer: {
        width: 28,
        height: 28,
        borderRadius: 14,
        backgroundColor: "rgba(255, 255, 255, 0.3)",
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.sm,
    },
    vipText: {
        color: "#FFF",
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        marginRight: theme.spacing.sm,
    },
    vipStatus: {
        paddingHorizontal: theme.spacing.sm,
        paddingVertical: 2,
        borderRadius: 10,
    },
    vipStatusText: {
        color: "rgba(255, 255, 255, 0.9)",
        fontSize: theme.fontSize.sm,
    },
    vipBenefits: {
        marginLeft: theme.spacing.md,
    },
    vipBenefitText: {
        color: "rgba(255, 255, 255, 0.9)",
        fontSize: theme.fontSize.sm,
        marginBottom: 4,
    },
    activateButton: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#FFF",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        borderRadius: theme.borderRadius.large,
        alignSelf: "stretch",
    },
    activateButtonText: {
        color: theme.colors.primary.default,
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        marginRight: theme.spacing.xs,
    },
})

